import columnsData, { ColumnsItem } from './data'
import React, { useRef } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getRechargeRecordList } from './service'
import TableTitle from '@/components/TableTitle';

export default () => {
  // 表头赋值
  const columns: ProColumns<ColumnsItem>[] = columnsData
  // 定义金额单元格
  const amount = (text: any) => [
    <p
      key='amount'
      style={{ textAlign: 'right', margin: 0 }}
    >
      {typeof text === 'number' ? text.toFixed(6) : null}
    </p>
  ]
  const ccy = (text: any, record: any) => [
    <>
      {
        record.rechargeMode === '01' ? 'HPC' : 'CAD'
      }
    </>
  ]
  // 列渲染样式赋值
  columns.forEach(item => {
    item.dataIndex === 'amt' ? item.render = amount : undefined
    item.dataIndex === 'recAmount' ? item.render = amount : undefined
    item.dataIndex === 'fee' ? item.render = amount : undefined
  })
  // Table action 的引用，便于自定义触发
  const actionRef = useRef<ActionType>();

  return (
    <div>
      {/* 表格 */}
      <ProTable<ColumnsItem>
        scroll={{ x: 900 }}
        bordered
        headerTitle={<TableTitle title='充值交易' />}
        columns={columns}
        actionRef={actionRef}
        request={async params => {
          console.log(params);

          let data = await getRechargeRecordList({ ...params, pageNum: params.current })
          console.log(data);

          const result = {
            data: data.body.list,
            total: data.body.total,
          }
          return result;
        }}
        // 本地储存表格列的显示参数
        columnsState={{
          persistenceKey: 'rechargeRecordList',
          persistenceType: 'localStorage',
        }}
        // 每行表格的key
        rowKey="rcNo"
        // 搜索表单布局配置
        search={{
          labelWidth: 'auto',
        }}
        // 分页相关配置
        pagination={{
          // 初始页面数据条数
          pageSize: 10,
        }}
        dateFormatter="string"
      />
    </div>
  );
};